<template>
  <div class="pocket-view">
    <van-nav-bar title="咖啡钱包" left-arrow fixed @click-left="navigateOwner" />
    <van-list>
      <van-grid :border="false" :column-num="2" :gutter="10">
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
        <van-grid-item>
          <van-image :src="com" />
        </van-grid-item>
      </van-grid>
    </van-list>
    <van-tabbar v-model="active" :border="true" :fixed="true" route>
      <van-tabbar-item v-for="icon in icons" :key="icon.id" :to="icon.url">
        <span>{{icon.text}}</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import gift from "@/assets/pocket/gift.svg";
import coupon from "@/assets/pocket/coupon.svg";
import packet from "@/assets/pocket/packet.svg";
import com from "@/assets/pocket/com.png";

export default {
  data() {
    return {
      com,
      active: 0,
      icons: [
        {
          id: 1,
          active: coupon,
          inactive: coupon,
          text: "充赠优惠",
          url: ""
        },
        {
          id: 2,
          active: packet,
          inactive: packet,
          text: "我要请客",
          url: ""
        },
        {
          id: 3,
          active: gift,
          inactive: gift,
          text: "发送红包",
          url: ""
        }
      ]
    };
  },
  methods: {
    navigateOwner() {
      this.$router.push("/owner");
    }
  }
};
</script>
<style lang="less">
.pocket-view {
  background-color: #efefef;
  height: 100%;
  overflow: scroll;
  padding-top: 56px;
  .van-image {
    pointer-events: none;
  }
}
.van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>